import { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as userActions from '../../actions/user';
class User extends Component {
  render () {
    let userData;
    const { user, isFetching, error } = this.props.user;
    if ( error ) {
      userData = error;
    } else if ( isFetching ) {
      console.log(isFetching);
      userData = "Loading...";
    } else {
      userData = user;
    }
    return (
      <div className="continer text-center">
        <p>{ userData }</p>
        <button className="btn btn-primary" onClick={ () => { this.props.userActions.getUser() }}>getUser</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return{
    user: state.user,
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    userActions: bindActionCreators(userActions, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(User)